<!DOCTYPE html>

<html lang="en">

<head>
    <title>程序创新网</title>
    <!-- Meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Gadget Sign Up Form Responsive Widget, Audio and Video players, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"
    />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <!-- Meta tags -->
    <!--import bootstrap-->
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap"></script>
    <!-- css files -->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.css"/>
    <!-- font-awesome icons -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <!--stylesheets-->
    <link href="css/style.css" rel='stylesheet' type='text/css' media="all">
    <!--//style sheet end here-->
    <link href="//fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
    <style type="text/css">
        .txt-left-side-box {
            flex-basis: 35%;
            -webkit-flex-basis: 35%;
            box-sizing: border-box;
            text-align: center;
            background: #fff;
            box-shadow: 0px 0px 10px 1px #cccccc;
            display: inline;
        }
        .txt-left-side-box2 {
            flex-basis: 35%;
            -webkit-flex-basis: 35%;
            box-sizing: border-box;
            text-align: center;
            background: #fff;
            box-shadow: 0px 0px 10px 1px #cccccc;
            display: block;
            margin: 10px;
            padding: 100px 50px;
        }
    </style>
</head>
<body>
<h1 class="error">欢迎登陆<br/><span class="bg-success">程序创新网</span></h1>
<!---728x90--->
<div class="w3layouts-two-grids">
    <!---728x90--->
    <div class="mid-class">
        <div class="img-right-side">
            <h3>生活其实很简单,就是给自己微笑,给身边的人温暖。</h3>
            <p>或许，人生的每一次蜕变，都是触目惊心的。曾经，我认为有些河流，我永远趟不过去，有些山峰，我永远不能翻越。不曾想，自己竟然是如此的勇敢。</p>
            <img src="images/b11.png" class="img-fluid" alt="">
        </div>
        <div class="txt-left-side">
            <div class="txt-left-side-box">
                <div class="txt-left-side-box2">
                    <h2> Sign In Here </h2>
                    <form action="userlogin" method="post">
                        <div class="form-left-to-w3l">
                            <span class="fa fa-user-o" aria-hidden="true"></span>
                            <input type="text" name="Name" id="Name" placeholder=" Name" required="required">
                            <p id="username-tips">hi</p>
                            <script>
                                $(function () {
                                    $("#Name").blur(function () {
                                       var username = $(this).val();
                                       $.ajax({
                                           url:"usernameTip",
                                           data:"username="+username,
                                           type:"post",
                                           dataType:"JSON",//设置服务器端响应回来的格式
                                           success:function(rs){
                                               // alert(00);
                                               // rs = eval("("+rs+")");
                                               // alert(rs.username);
                                               $("#username-tips").html(rs.username);
                                           }
                                       });
                                    });
                                })
                            </script>
                            <div class="clear"></div>
                        </div>

                        <div class="form-left-to-w3l ">
                            <span class="fa fa-lock" aria-hidden="true"></span>
                            <input type="password" name="password" id="password" placeholder="Password" required="required">
                            <p id="userpwd-tips">hi</p>
                            <script>
                                $(function () {
                                    $("#password").blur(function () {
                                        var username = $("#Name").val();
                                        var userPassword = $("#password").val();
                                       $.ajax({
                                           url:"passwordTips",
                                           data:"password="+ userPassword+"&username="+username,
                                           type:"post",
                                           dataType:"JSON",
                                           success:function (rs) {
                                               // rs = eval("("+rs+")");
                                               $("#userpwd-tips").html(rs.password);
                                           }
                                       });
                                    });
                                })
                            </script>
                            <div class="clear"></div>
                        </div>
                        <div class="main-two-w3ls">
                            <div class="left-side-forget">
                                <input type="checkbox" class="checked">
                                <span class="remenber-me">记住我 </span>
                            </div>
                            <div class="right-side-forget">
                                <a href="#" class="for">忘了密码...?</a>
                            </div>
                        </div>
                        <div class="btn">
                            <button type="submit"><p class="text-warning">登 陆</p></button>
                        </div>
                    </form>
                    <div class="w3layouts_more-buttn">
                        <h3>还没有账号..?
                            <a href="#">点这里
                            </a>
                        </h3>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---728x90--->
<footer class="copyrigh-wthree">
    <p>
        © 2021 登录模块. All Rights Reserved | Design by
        <a href="#" target="_blank">@Author junlaii.</a>
    </p>
</footer>
</body>

</html>